<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<form class="layui-form white-bg" style="padding: 10px" action=""
		lay-filter="example">
		<fieldset class="layui-elem-field layui-field-title site-title">
			<legend>
				<a name="fixbar">我的同学录</a>
			</legend>
		</fieldset>
		<table class="layui-hide" id="test" lay-filter="test"></table>

		<script type="text/html" id="toolbarDemo">
					<div class="demoTable">
						学员姓名：
						<div class="layui-inline">
							<input class="layui-input" placeholder="请输入姓名" name="id" id="demoReload" autocomplete="off" style="height: 30px;">
						</div>
						<button class="layui-btn" style="height: 30px; line-height: 30px" data-type="reload">搜索</button>
					</div>
					<div class="clear"></div>
				</script>

		<script type="text/html" id="barDemo">
					<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="detail">查看</a>
				</script>


		<script>
                    layui.use('table', function(){
                        var table = layui.table;

                        table.render({
                            elem: '#test'
                            ,url:'/test/table/txl.json'
                            ,toolbar: '#toolbarDemo'
                            ,title: '用户数据表'
                            ,cols: [[
                                {type: 'checkbox', fixed: 'left'}
                                ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
                                ,{field:'username', title:'姓名', width: 110,}
                                ,{field:'object', title:'性别', width: 100}
                                ,{field:'city', title:'出生年月', width: 110,}
                                ,{field:'logistics', title:'学历', width: 100,}
                                ,{field:'classteacher', title:'毕业院校专业', width: 280}
                                ,{field:'counselor', title:'入党时间', width:110}
                                ,{field:'logins', title:'工作单位', width:130}
                            ]]
                            ,page: true
                        });

                        //头工具栏事件
                        table.on('toolbar(test)', function(obj){
                            var checkStatus = table.checkStatus(obj.config.id);
                            switch(obj.event){
                                case 'getCheckData':
                                    var data = checkStatus.data;
                                    layer.alert(JSON.stringify(data));
                                    break;
                                case 'getCheckLength':
                                    var data = checkStatus.data;
                                    layer.msg('选中了：'+ data.length + ' 个');
                                    break;
                                case 'isAll':
                                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                                    break;
                            };
                        });

                        //监听行工具事件
                        table.on('tool(test)', function(obj){
                            var data = obj.data;
                            //console.log(obj)
                            if(obj.event === 'del'){
                                layer.confirm('真的删除行么', function(index){
                                    obj.del();
                                    layer.close(index);
                                });
                            } else if(obj.event === 'detail'){
                                //当事件为修改的时候,跳转页面
                                location.href='http://localhost:8080/pages/JXGL/bjxx.html'
                            } else if(obj.event === 'edit'){
                                layer.prompt({
                                    formType: 2
                                    ,value: data.email
                                }, function(value, index){
                                    obj.update({
                                        email: value
                                    });
                                    layer.close(index);
                                });
                            }
                        });
                    });
				</script>

	</form>
	<div id="footer"></div>
</body>
</html>